<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->

    <div class="layout">
      <!-- 头部 -->

      <header class="header">
        <div class="logo">企业员工管理系统</div>
        <div class="date-info">
          <div class="current-date">{{ currentDate }}</div>
          <div class="motto">只要不放弃努力和追求，小草也有点缀春天的价值</div>
        </div>
        <div class="user-center">
          <button @click="openUserCenter" class="user-btn">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="currentColor"
              viewBox="0 0 16 16"
            >
              <path
                d="M15 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.9 6.21a.75.75 0 0 0-.07.84l1.27 2.54a.75.75 0 0 0 .69.41h2.5a.75.75 0 0 0 .69-.41l1.27-2.54a.75.75 0 0 0-.07-.84l-1.58-.79a.75.75 0 0 0-.69 0l-1.58.79a.75.75 0 0 0-.69 0l-1.58-.79z"
              />
            </svg>
            <span>个人中心</span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="12"
              height="12"
              fill="currentColor"
              viewBox="0 0 16 16"
              class="arrow-down"
            >
              <path
                fill-rule="evenodd"
                d="M8 12a.5.5 0 0 0 .5-.5V5.707l1.147 1.147a.5.5 0 0 0 .707-.707L8.5 4.293l-.547.547A.5.5 0 0 0 7.707 5.5L6.56 4.353a.5.5 0 0 0-.707.707L7.5 6.853V11.5A.5.5 0 0 0 8 12z"
              />
            </svg>
          </button>
        </div>
      </header>

      <!-- 主体内容区 -->
      <div class="main-content">
        <!-- 左侧菜单栏 -->
        <aside class="sidebar">
          <nav class="menu">
            <router-link
              to="/emp/home"
              class="menu-item"
              :class="{ active: $route.path === '/emp/home' }"
              >首页</router-link
            >
            <router-link
              to="/emp/leave"
              class="menu-item"
              :class="{ active: $route.path === '/emp/leave' }"
              >请假申请</router-link
            >
            <router-link
              to="/emp/attend"
              class="menu-item"
              :class="{ active: $route.path === '/emp/attend' }"
              >考勤打卡</router-link
            >
            <router-link
              to="/emp/resign"
              class="menu-item"
              :class="{ active: $route.path === '/emp/resign' }"
              >离职申请</router-link
            >
          </nav>
          <div class="menu-item logout" @click="logout">Log out</div>
        </aside>

        <!-- 右侧内容区 -->
        <main class="content">
          <router-view></router-view>
        </main>
      </div>

      <!-- 返回顶部按钮 -->
      <div
        class="scroll-to-top-btn"
        v-show="showScrollToTop"
        @click="scrollToTop"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          fill="currentColor"
          viewBox="0 0 16 16"
        >
          <path
            fill-rule="evenodd"
            d="M8 12a.5.5 0 0 0 .5-.5V5.707l1.147 1.147a.5.5 0 0 0 .707-.707L8.5 4.293l-.547.547A.5.5 0 0 0 7.707 5.5L6.56 4.353a.5.5 0 0 0-.707.707L7.5 6.853V11.5A.5.5 0 0 0 8 12z"
          />
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",

  data() {
    return {
      isDarkMode: false,
      currentDate: "",
      showScrollToTop: true, // 控制返回顶部按钮的显示
    };
  },
  methods: {
    logout() {
      // 模拟登出逻辑
      this.$router.push("/login");
    },
    scrollToTop() {
      window.scrollTo({ top: 0, behavior: "smooth" });
      this.showScrollToTop = true; // 滚动到顶部后隐藏按钮
    },
    openUserCenter() {
      // 打开个人中心弹窗或跳转页面
      this.$router.push("/personal");
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const weekdays = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      const weekday = weekdays[date.getDay()];

      return `${year}年${month}月${day}日 ${weekday}`;
    },
  },
  mounted() {
    // 初始化日期
    this.currentDate = this.formatDate(new Date());

    // 设置定时器每分钟更新一次日期
    setInterval(() => {
      this.currentDate = this.formatDate(new Date());
    }, 60000);

    // 添加滚动事件监听
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    // 移除滚动事件监听
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style scoped>
.app-container {
  font-family: "Arial", sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.header {
  background-color: #00bfff;
  color: white;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.logo {
  font-size: 1.2rem;
  font-weight: bold;
}

.date-info {
  text-align: center;
  font-size: 0.9rem;
  color: red;
  position: relative;
}

.current-date {
  font-size: 0.9rem;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 0.2rem;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

.motto {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
  line-height: 1.2;
  opacity: 0.9;
}

.user-center {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-btn {
  background-color: transparent;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.1);
}

.user-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.user-btn:active {
  transform: translateY(0);
}

/* 箭头图标样式 */
.arrow-down {
  transition: transform 0.3s ease;
  opacity: 0.7;
}

.user-btn:hover .arrow-down {
  transform: rotate(180deg);
  opacity: 1;
}

/* 其他样式保持不变 */
.main-content {
  display: flex;
  height: calc(100vh - 60px);
}

.sidebar {
  width: 200px;
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
  overflow-y: auto;
}

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  display: block;
  padding: 1rem 1.5rem;
  text-decoration: none;
  color: #333;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}
.menu-item {
  display: block;
  padding: 1rem 1.5rem;
  text-decoration: none;
  color: #333;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.menu-item:hover {
  background-color: #e0e0e0;
}

.menu-item.active {
  background-color: #06daf6;
  color: white;
  font-weight: bold;
}
.scroll-to-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: #00bfff;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  z-index: 1000;
}

.scroll-to-top-btn:hover {
  background-color: #0099cc;
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.scroll-to-top-btn svg {
  width: 30px;
  height: 30px;
}
.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.home-page {
  max-width: 1200px;
  margin: 0 auto;
}

.welcome-section {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 10px;
}

.welcome-section h1 {
  margin: 0 0 10px 0;
  font-size: 2rem;
}

.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card h3 {
  margin-top: 0;
  color: #333;
  border-bottom: 2px solid #00bfff;
  padding-bottom: 10px;
}

.quick-btn {
  background-color: #00bfff;
  color: white;
  border: none;
  padding: 10px 15px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.quick-btn:hover {
  background-color: #0099cc;
}

.statistics-section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.statistics-section h2 {
  margin-top: 0;
  color: #333;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.stat-item {
  text-align: center;
  padding: 15px;
}

.stat-number {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  color: #00bfff;
}

.stat-label {
  display: block;
  color: #666;
  margin-top: 5px;
}

.logout {
  margin-top: auto;
  color: #666;
  font-size: 14px;
}
</style>
